<!DOCTYPE html>
<html dir="ltr" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" th:href="@{/assets/images/favicon.png}">
    <title>创建方案·网络情报分析系统</title>

    <!-- Custom CSS -->
    <link th:href="@{/dist/css/style.min.css}" rel="stylesheet">
    <link th:href="@{/dist/css/custom.css}" rel="stylesheet">
    <link th:href="@{/assets/libs/sweetalert2/dist/sweetalert2.min.css}" rel="stylesheet">
    <link rel="stylesheet" type="text/css" th:href="@{/assets/libs/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css}">
    <link th:href="@{/assets/libs/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css}" rel="stylesheet"
          type="text/css">
    <!--<script src="//at.alicdn.com/t/font_1709263_w16payhc3l.js"></script>-->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script th:src="@{/common/analyze-cloud.js}"></script>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <script th:src="@{/common/analyze-cloud.js}"></script>
    <script th:src="@{/common/ajax-config.js}"></script>
    <![endif]-->
    <style>
    	input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
			color: #b6b7b7 !important;
		}
		input:-moz-placeholder, textarea:-moz-placeholder {
			color: #b6b7b7 !important;
		}
		input::-moz-placeholder, textarea::-moz-placeholder {
		    color: #b6b7b7 !important;
		}
		input:-ms-input-placeholder, textarea:-ms-input-placeholder {
		    color: #b6b7b7 !important;
		}


        .switch {
            display: inline-block;
        }

        .bootstrap-switch {
            border-radius: 22px;
            width: 35px !important;
            height: 19px !important;
        }

        .bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-label {
            padding: 0px;
            font-size: 10px;
            display: inline-block;
        }

        .bootstrap-switch .bootstrap-switch-handle-on {
            width: 35px !important;
            margin-right: 0px;
            padding-right: 22px;
        }

        .bootstrap-switch .bootstrap-switch-handle-off {
            width: 35px !important;
            border-radius: 11px;
            margin-left: -16px;
            /*padding-right: -30px;*/
            position: relative;
            color: #fff !important;
        }
        .create-tab>li:nth-child(3) {
            cursor: pointer;
        }
        .create-tab>li:nth-child(3)::after {
            content: '';
            width: 0%;
            height: 2px;
            background: #065bc9;
            position: absolute;
            bottom: 0px;
            left: 0;
            transition: all 0.3s ease-in;
        }
        #statusSwitch .bootstrap-switch{
            width: 50px !important;
            border: none;
            padding: 0;
        }
        #statusSwitch .bootstrap-switch-handle-on,#statusSwitch .bootstrap-switch-handle-off{
            width: 50px !important;
            margin: 0;
            border: 0;
            padding: 0 !important;
            font-size: 12px;
        }
        #statusSwitch .bootstrap-switch .bootstrap-switch-label{
            display: none;
        }
    </style>
</head>
<body>
<div id="main-wrapper">
    <div th:replace="common/header::header"></div>
<!--     <div th:replace="common/project_left::project_left"></div> -->
    <div th:replace="common/monitor_left::monitor_left"></div>
    <div class="page-wrapper">
        <div class="right-part right-content">
            <!-- nav start-->
            <div class="page-breadcrumb">
                <div class="row">
                    <div class="col-lg-5 align-self-center">
                        <div class="d-flex align-items-center">
                            <nav aria-label="breadcrumb">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">监测管理</li>
                                    <li class="breadcrumb-item" id="projectname"></li>
                                    <li class="breadcrumb-item">新增方案</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                    <div class="col-lg-7 align-self-center ">
                        <div class="d-flex no-block justify-content-end align-items-center data-number-min">
                            <button class="btn btn-sm btn-outline-secondary bnone" type="button" id="goback">
                                <i class="mdi mdi-redo-variant"></i> 返回
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- nav end-->
            <div class="p-20">
                <div class="card">
                    <div class="card-body">
                        <ul class="progress-tab">
                            <li class="line-active">
                                <span>1</span>
                                <span>选择创建方案类型</span>
                            </li>
                            <li class="line-active">
                                <span>2</span>
                                <span>创建监测方案</span>
                            </li>
                            <li class="" id="createcomplete">
                                <span>3</span>
                                <span>创建方案完成</span>
                            </li>
                            <li class="" id="checkmonitor">
                                <span>4</span>
                                <span>查看监测数据</span>
                            </li>
                        </ul>
                        <div class="pro-introduce m-t-20">什么是监测方案：监测方案是与您相关或您关注的词条，通过您设置的词条，系统将把互联网中与您相关的信息内容第一时间通知您。
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <ul class="create-tab" id="search-tab">
                            <!--<li class="create-tab-act" data-type="2">快速创建</li>-->
                            <li class="create-tab-act" data-type="1">高级创建</li>
                            <li id="tips" data-type="3">当前是高级创建，可设置550字</li>
                        </ul>
                        <!-- tab1 start -->
                        <div id="tab2" class="card m-b-0">
                            <div class="card-body p-b-0">
                                <div class="create-line m-b-30">
                                    <span>方案名称</span>
                                    <input id="proname1" type="text" maxlength="10" class="form-control"
                                           placeholder="请输入方案名称">
                                    <span>*方案名称控制在6字符以内</span>
                                </div>
                                <div class="create-line m-b-30">
                                    <span>所属方案组名称</span>
                                    <select name="" id="groupList" class="form-control">
                                    </select>
                                </div>
                                <div class="create-line2 m-b-20">
                                    <span>方案主体关键词</span>
                                    <textarea class="form-control" name="" id="prokeywords1" rows="4"
                                              placeholder=''></textarea>
                                    <div class="create-tips">
                                        <a tabindex="0" class="" data-html="true" role="button" data-toggle="popover"
                                           data-trigger="focus" title="方案主体关键词提示"
                                           data-content="1：“+”表示“并且”,“|”表示“或”
														<br>                                           
														2：什么情况下用“|”：
														如想关注北京或上海或广州的新闻，表达式为“北京|上海|广州”，表示文章中出现 “北京”、“上海”、“广州”任意一个城市就能监测到。
														<br>
														3：什么情况下用“+”：
														如想关注北京车牌摇号的新闻，表达式为“北京+车牌摇号”，表示文章中同时出现 “北京”和“车牌摇号”两个关键词才能监测到。
														<br>
														4：什么情况下同时用到“+”、“|”：
														如想关注上海世博会的新闻，由于“世博会”又可能被称为“世界博览会”，表达式为 “上海+(世博会|世界博览会)”，表示文章中出现“上海”，同时出现“世博会”或者 “世界博览会”中任意一个词，就能监测到；
														<br>
														5：什么情况下用到排除关键词：
														如想关注上海、北京、广州的新闻，但又不想看到内容中有“三室一厅”、“二室 一厅”这种关键词的广告，可以使用排除关键词的方式。 匹配关键词表达式“北京|上海|广州” 排除关键词表达式“三室一厅|二室一厅”">
                                            <i class="fa fa-question-circle"></i>
                                        </a>
                                        <div><a style="color: #2962FF" href="https://www.bilibili.com/video/BV1gT4y1n7Y1/" target="_blank">配置教程</a></div>
                                    </div>
                                </div>
                                <div class="create-line2 m-b-20">
                                    <span>监测屏蔽歧义词</span>
                                    <textarea class="form-control" name="" id="proshield1" rows="4"
                                              placeholder=''></textarea>
                                    <div class="create-tips">
                                        <a tabindex="0" class="" data-html="true" role="button" data-toggle="popover"
                                           data-trigger="focus" title="监测屏蔽歧义词提示"
                                           data-content="1：“+”表示“并且”,“|”表示“或”
														<br>                                           
														2：什么情况下用“|”：
														如想关注北京或上海或广州的新闻，表达式为“北京|上海|广州”，表示文章中出现 “北京”、“上海”、“广州”任意一个城市就能监测到。
														<br>
														3：什么情况下用“+”：
														如想关注北京车牌摇号的新闻，表达式为“北京+车牌摇号”，表示文章中同时出现 “北京”和“车牌摇号”两个关键词才能监测到。
														<br>
														4：什么情况下同时用到“+”、“|”：
														如想关注上海世博会的新闻，由于“世博会”又可能被称为“世界博览会”，表达式为 “上海+(世博会|世界博览会)”，表示文章中出现“上海”，同时出现“世博会”或者 “世界博览会”中任意一个词，就能监测到；
														<br>
														5：什么情况下用到排除关键词：
														如想关注上海、北京、广州的新闻，但又不想看到内容中有“三室一厅”、“二室 一厅”这种关键词的广告，可以使用排除关键词的方式。 匹配关键词表达式“北京|上海|广州” 排除关键词表达式“三室一厅|二室一厅”">
                                            <i class="fa fa-question-circle"></i>
                                        </a>
                                    </div>
                                </div>
                                <!--<div class="create-btn-group">
                                    <button class="btn btn-info m-r-10" type="button" id="gosubmit1">确定</button>
                                    <button class="btn btn-secondary" type="button" id="goback1">取消</button>
                                </div>-->
                            </div>
                        </div>
                        <!-- tab1 end -->
                        <!-- tab2 start -->
                        <div id="tab1" class="card m-b-0" style="display: none;">
                            <div class="card-body p-b-0">
                                <div class="create-line m-b-30">
                                    <span>方案名称</span>
                                    <input id="proname" type="text" maxlength="6" class="form-control"
                                           placeholder="请输入方案名称">
                                    <span>*方案名称控制在6字符以内</span>
                                </div>
                                <div class="create-line m-b-30">
                                    <span>所属方案组名称</span>
                                    <select name="" id="groupList2" class="form-control">
                                        <option value="1">涉及国家</option>
                                    </select>
                                </div>
                                <div class="create-line2 m-b-20">
                                    <span>方案主体关键词</span>
                                    <textarea class="form-control" name="" id="prokeywords" rows="4"
                                              placeholder='关键词之间用逗号","隔开&#13;&#10;例如：汽车行业，别克，辉腾，三菱'></textarea>
                                    <div class="create-tips">
                                        <a tabindex="0" class="" data-html="true" role="button" data-toggle="popover"
                                           data-trigger="focus" title="方案主体关键词提示"
                                           data-content="1、地域、人物、事件 三类都可输入多个关键词，关键词之间用逗号分开。三个类型都可以为空。<br>2、每一类的多个关键词之间默认为或(或者)”的关系。<br>3、地域、人物、事件三个类型之间是“与(并且)”的关系。例如：地域配置了“上海”，人物配置了“周某”，事件配置了“撞车”，只有同时满足这3个条件的文章才会被监测到。">
                                            <i class="fa fa-question-circle"></i>
                                        </a>
                                        <div><a style="color: #2962FF" href="https://www.bilibili.com/video/BV1gT4y1n7Y1/" target="_blank">配置教程</a></div>
                                    </div>
                                </div>
                                <!-- <div class="create-line2 m-b-20">
                                    <span>国家/城市/地域 关键词</span>
                                    <textarea class="form-control" name="" id="proarea" rows="4"
                                              placeholder='关键词之间用逗号","隔开;例如：美国，上海，北京，滕家沟，南京西路'></textarea>
                                    <div class="create-tips">
                                        <a tabindex="0" class="" data-html="true" role="button" data-toggle="popover"
                                           data-trigger="focus" title="国家/城市/地域 关键词提示"
                                           data-content="1、地域、人物、事件 三类都可输入多个关键词，关键词之间用空格分开。三个类型都可以为空。<br>2、每一类的多个关键词之间默认为或(或者)”的关系。<br>3、地域、人物、事件三个类型之间是“与(并且)”的关系。例如：地域配置了“上海”，人物配置了“周某”，事件配置了“撞车”，只有同时满足这3个条件的文章才会被监测到。">
                                            <i class="fa fa-question-circle"></i>
                                        </a>
                                    </div>
                                </div> -->
                                <!-- <div class="create-line2 m-b-20">
                                    <span>人物/机构/企业 关键词</span>
                                    <textarea class="form-control" name="" id="properson" rows="4"
                                              placeholder='关键词之间用逗号","隔开；例如：马云，北京网安中心，腾讯科技'></textarea>
                                    <div class="create-tips">
                                        <a tabindex="0" class="" data-html="true" role="button" data-toggle="popover"
                                           data-trigger="focus" title="人物/机构/企业 关键词提示"
                                           data-content="1、地域、人物、事件 三类都可输入多个关键词，关键词之间用空格分开。三个类型都可以为空。<br>2、每一类的多个关键词之间默认为或(或者)”的关系。<br>3、地域、人物、事件三个类型之间是“与(并且)”的关系。例如：地域配置了“上海”，人物配置了“周某”，事件配置了“撞车”，只有同时满足这3个条件的文章才会被监测到。">
                                            <i class="fa fa-question-circle"></i>
                                        </a>
                                    </div>
                                </div> -->
                                <!-- <div class="create-line2 m-b-20">
                                    <span>事件/动词 关键词</span>
                                    <textarea class="form-control" name="" id="proaccident" rows="4"
                                              placeholder='关键词之间用逗号","隔开；例如：高管离职，拖欠工资，跑路，开销，焦虑'></textarea>
                                    <div class="create-tips">
                                        <a tabindex="0" class="" data-html="true" role="button" data-toggle="popover"
                                           data-trigger="focus" title="事件/动词 关键词提示"
                                           data-content="1、地域、人物、事件 三类都可输入多个关键词，关键词之间用空格分开。三个类型都可以为空。<br>2、每一类的多个关键词之间默认为或(或者)”的关系。<br>3、地域、人物、事件三个类型之间是“与(并且)”的关系。例如：地域配置了“上海”，人物配置了“周某”，事件配置了“撞车”，只有同时满足这3个条件的文章才会被监测到。">
                                            <i class="fa fa-question-circle"></i>
                                        </a>
                                    </div>
                                </div> -->
                                <div class="create-line2 m-b-20">
                                    <span>监测屏蔽歧义词</span>
                                    <textarea class="form-control" name="" id="proshield" rows="4"
                                              placeholder='屏蔽词之间用逗号","隔开&#13;&#10;例如：合作，用不，二娃，流连'></textarea>
                                    <div class="create-tips">
                                        <a tabindex="0" class="" data-html="true" role="button" data-toggle="popover"
                                           data-trigger="focus" title="监测屏蔽歧义词提示"
                                           data-content="1、地域、人物、事件 三类都可输入多个关键词，关键词之间用逗号分开。三个类型都可以为空。<br>2、每一类的多个关键词之间默认为或(或者)”的关系。<br>3、地域、人物、事件三个类型之间是“与(并且)”的关系。例如：地域配置了“上海”，人物配置了“周某”，事件配置了“撞车”，只有同时满足这3个条件的文章才会被监测到。">
                                            <i class="fa fa-question-circle"></i>
                                        </a>
                                    </div>
                                </div>
                                <!--<div class="create-btn-group">
                                    <button class="btn btn-info m-r-10" type="button" id="gosubmit">确定</button>
                                    <button class="btn btn-secondary" type="button" id="goback">取消</button>
                                </div>-->
                            </div>
                        </div>
                        <!-- tab2 end -->
                        <!-- tab3 start -->
                        <div id="tab3" class="card m-b-0">
                            <div class="card-body p-b-0">
                                <div class="warning-edit-line">
                                    <div>预警开关</div>
                                    <div id="statusSwitch" class="bt-switch-early-warning">
                                        <input id="status" type="checkbox" data-on-color="success" data-off-color="warning">
                                    </div>
                                </div>
                                <div class="alertSettings" style="display:none;">
                                    <!--<div class="warning-edit-line">
                                        <div>方案名称</div>
                                        <div class="schemeName">日常出行</div>
                                    </div>-->
                                    <div class="warning-edit-line">
                                        <div>预警名称</div>
                                        <div>
                                            <input class="form-control" type="text" name="warning-name" id="warning-name"
                                                   placeholder="请输入预警名称">
                                        </div>
                                    </div>
                                    <div class="warning-edit-line">
                                        <div>设置预警词</div>
                                        <div>
                                <textarea class="form-control" name="warning-word" id="warning-word" cols="30" rows="3"
                                          placeholder="请输入预警词，用逗号隔开"></textarea>
                                        </div>
                                        <div class="warning-tips">
                                            <a tabindex="0" class="" role="button" data-toggle="popover" data-trigger="focus"
                                               title="方案主体关键词提示"
                                               data-content="1、地域、人物、事件 三类都可输入多个关键词，关键词之间用空格分开。三个类型都可以为空。2、每一类的多个关键词之间默认为或(或者)”的关系。3、地域、人物、事件三个类型之间是“与(并且)”的关系。例如：地域配置了“上海”，人物配置了“周某”，事件配置了“撞车”，只有同时满足这3个条件的文章才会被监测到。">
                                                <i class="fa fa-question-circle"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="warning-edit-line">
                                        <div>来源类型</div>
                                        <div id="warning-classify">
                                            <span class="badge badge-pill badge-info" data-id="0" onclick="badgeClassifyClick(this)">全部</span>
                                            <span class="badge badge-pill badge-info" data-id="1" onclick="badgeClassifyClick(this)">微信</span>
                                            <span class="badge badge-pill badge-info" data-id="2" onclick="badgeClassifyClick(this)">微博</span>
                                            <span class="badge badge-pill badge-info" data-id="3" onclick="badgeClassifyClick(this)">政务</span>
                                            <span class="badge badge-pill badge-info" data-id="4" onclick="badgeClassifyClick(this)">论坛</span>
                                            <span class="badge badge-pill badge-info" data-id="5" onclick="badgeClassifyClick(this)">新闻</span>
                                            <span class="badge badge-pill badge-info" data-id="6" onclick="badgeClassifyClick(this)">报刊</span>
                                            <span class="badge badge-pill badge-info" data-id="7" onclick="badgeClassifyClick(this)">客户端</span>
                                            <span class="badge badge-pill badge-info" data-id="8" onclick="badgeClassifyClick(this)">网站</span>
                                            <span class="badge badge-pill badge-info" data-id="9" onclick="badgeClassifyClick(this)">外媒</span>
                                            <span class="badge badge-pill badge-info" data-id="10" onclick="badgeClassifyClick(this)">视频</span>
                                            <span class="badge badge-pill badge-info" data-id="11" onclick="badgeClassifyClick(this)">博客</span>
                                        </div>
                                    </div>

                                    <!-- double line  start-->
                                    <div class="warning-edit-double">
                                        <div class="warning-left waring_double">
                                            <div>预警内容</div>
                                            <div id="warning-content">
                                                <span class="badge badge-pill badge-info" data-id="0"
                                                      onclick="badgeClick(this)">全部</span>
                                                <span class="badge badge-pill badge-light" data-id="1"
                                                      onclick="badgeClick(this)">敏感</span>
                                            </div>
                                        </div>
                                        <div class="warning-right">
                                            <div>相似文章合并</div>
                                            <div id="warning-similar">
                                                <span class="badge badge-pill badge-light" data-id="1" onclick="badgeClick(this)">合并</span>
                                                <span class="badge badge-pill badge-info" data-id="0" onclick="badgeClick(this)">不合并</span>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- double line end-->
                                    <div class="warning-edit-double">
                                        <div class="warning-left waring_double">
                                            <div>匹配方式</div>
                                            <div id="warning-match">
                                                <span class="badge badge-pill badge-info" data-id="1" onclick="badgeClick(this)">按全文</span>
                                                <span class="badge badge-pill badge-light" data-id="2" onclick="badgeClick(this)">按标题</span>
                                                <span class="badge badge-pill badge-light" data-id="3" onclick="badgeClick(this)">按正文</span>
                                            </div>
                                        </div>
                                        <div class="warning-right">
                                            <div>预警去重</div>
                                            <div id="warning-deduplication">
                                                <span class="badge badge-pill badge-light" data-id="1"
                                                      onclick="badgeClick(this)">开启</span>
                                                <span class="badge badge-pill badge-info" data-id="0"
                                                      onclick="badgeClick(this)">关闭</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="warning-edit-double">
                                        <div class="warning-left waring_double">
                                            <div>预警来源</div>
                                            <div id="warning-source">
                                                <span class="badge badge-pill badge-info" data-id="1" onclick="badgeClick(this)">系统推送</span>
                                                <span class="badge badge-pill badge-light" data-id="2" onclick="badgeClick(this)">邮箱推送</span>
                                                <span class="badge badge-pill badge-light" data-id="3" onclick="badgeClick(this)">公众号推送</span>
                                                <input id="email-input" style="display: none" type="text" class="form-control" placeholder="请输入邮箱地址,多个地址请使用英文逗号分隔"/>
                                            </div>
                                        </div>
                                        <div class="warning-right">
                                            <div>接收时间</div>
                                            <div>
                                                <select name="" id="warning-receive-time-start" class="custom-select form-control">
                                                    <option value="00:00">00:00</option>
                                                    <option value="01:00">01:00</option>
                                                    <option value="02:00">02:00</option>
                                                    <option value="03:00">03:00</option>
                                                    <option value="04:00">04:00</option>
                                                    <option value="05:00">05:00</option>
                                                    <option value="06:00">06:00</option>
                                                    <option value="07:00">07:00</option>
                                                    <option value="08:00">08:00</option>
                                                    <option value="09:00">09:00</option>
                                                    <option value="10:00">10:00</option>
                                                    <option value="11:00">11:00</option>
                                                    <option value="12:00">12:00</option>
                                                    <option value="13:00">13:00</option>
                                                    <option value="14:00">14:00</option>
                                                    <option value="15:00">15:00</option>
                                                    <option value="16:00">16:00</option>
                                                    <option value="17:00">17:00</option>
                                                    <option value="18:00">18:00</option>
                                                    <option value="19:00">19:00</option>
                                                    <option value="20:00">20:00</option>
                                                    <option value="21:00">21:00</option>
                                                    <option value="22:00">22:00</option>
                                                    <option value="23:00">23:00</option>
                                                </select>
                                                -
                                                <select name="" id="warning-receive-time-end" class="custom-select form-control">
                                                    <option value="00:00">00:00</option>
                                                    <option value="01:00">01:00</option>
                                                    <option value="02:00">02:00</option>
                                                    <option value="03:00">03:00</option>
                                                    <option value="04:00">04:00</option>
                                                    <option value="05:00">05:00</option>
                                                    <option value="06:00">06:00</option>
                                                    <option value="07:00">07:00</option>
                                                    <option value="08:00">08:00</option>
                                                    <option value="09:00">09:00</option>
                                                    <option value="10:00">10:00</option>
                                                    <option value="11:00">11:00</option>
                                                    <option value="12:00">12:00</option>
                                                    <option value="13:00">13:00</option>
                                                    <option value="14:00">14:00</option>
                                                    <option value="15:00">15:00</option>
                                                    <option value="16:00">16:00</option>
                                                    <option value="17:00">17:00</option>
                                                    <option value="18:00">18:00</option>
                                                    <option value="19:00">19:00</option>
                                                    <option value="20:00">20:00</option>
                                                    <option value="21:00">21:00</option>
                                                    <option value="22:00">22:00</option>
                                                    <option value="23:00" selected>23:00</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="warning-edit-double m-b-0">
                                        <div class="warning-left waring_double">
                                            <div>周末预警</div>
                                            <div id="weekend-warning">
                                                <span class="badge badge-pill badge-light" data-id="1"
                                                      onclick="badgeClick(this)">开启</span>
                                                <span class="badge badge-pill badge-info" data-id="0"
                                                      onclick="badgeClick(this)">关闭</span>
                                            </div>
                                        </div>
                                        <div class="warning-right">
                                            <div>预警间隔</div>
                                            <div id="warning-interval">
                                                <span class="badge badge-pill badge-info" data-id="1" onclick="badgeClick(this)">实时预警</span>
                                                <span class="badge badge-pill badge-light" data-id="2" onclick="badgeClick(this)">定时预警</span>
                                                <select name="" id="warning-interval-time" class="custom-select form-control">
                                                    <option value="1">1小时</option>
                                                    <option value="2">2小时</option>
                                                    <option value="3">3小时</option>
                                                    <option value="4">4小时</option>
                                                    <option value="5">5小时</option>
                                                    <option value="6">6小时</option>
                                                    <option value="7">7小时</option>
                                                    <option value="8">8小时</option>
                                                </select>
                                                <!-- <div class="form-group">
                                                    <div id="pips-steps-filter"></div>
                                                </div> -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div style="width: 140px; display: flex; justify-content: space-between;margin: 0 auto;">
                                    <button onclick="savefunctin()" class="btn btn-info">保存</button>
                                    <button onclick="backPage()" class="btn btn-secondary">取消</button>
                                </div>
                            </div>
                        </div>
                        <!-- tab3 end -->
                    </div>
                </div>
            </div>
            <div class="page-footer">
                © 2014-<span id="currentyear"></span> 思通数科（南京）信息技术有限公司 <a href="https://beian.miit.gov.cn" target="_blank">苏ICP备17066984号-1</a>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/assets/libs/jquery/dist/jquery.min.js}"></script>
<!-- Bootstrap tether Core JavaScript -->
<script th:src="@{/assets/libs/popper.js/dist/umd/popper.min.js}"></script>
<script th:src="@{/assets/libs/bootstrap/dist/js/bootstrap.min.js}"></script>
<!-- apps -->
<script th:src="@{/dist/js/app.min.js}"></script>
<script th:src="@{/dist/js/app.init.light-sidebar.js}"></script>
<script th:src="@{/dist/js/app-style-switcher.js}"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script th:src="@{/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js}"></script>
<script th:src="@{/assets/extra-libs/sparkline/sparkline.js}"></script>
<!--Wave Effects -->
<script th:src="@{/dist/js/waves.js}"></script>
<!--Menu sidebar -->
<script th:src="@{/dist/js/sidebarmenu.js}"></script>
<!--Custom JavaScript -->
<script th:src="@{/dist/js/custom.min.js}"></script>
<!-- this pages -->
<script th:src="@{/dist/js/projectlist.js}"></script>
<!-- 分页 -->
<script th:src="@{/dist/js/pages.js}"></script>
<!-- 右上角提示 -->
<script th:src="@{/assets/libs/block-ui/jquery.blockUI.js}"></script>
<script th:src="@{/common/tools.js}"></script>
<!-- 提示框 -->
<script th:src="@{/assets/libs/sweetalert2/dist/sweetalert2.all.min.js}"></script>
<script th:src="@{/assets/libs/bootstrap-switch/dist/js/bootstrap-switch.min.js}"></script>
<script th:src="@{/dist/baidu/baidu_statistics.js}"></script>
<script th:src="@{/common/qrcodePopup.js}"></script>

<script th:inline="javascript" type="text/javascript">
$("#currentyear").text((new Date()).getFullYear());

    var groupId = [[${groupId}]];
    analysis_groupid = groupId
    $(document).ready(function () {
        sendGroupByadd();  // 组装方案组数据
    });
    
    // 左侧方案切换
    function switchProject(event) {
        let $event = $(event);
        groupId = $event.attr("data-groupid");
        projectId = $event.attr("data-index");
        window.location.href = ctxPath + 'project/detail?groupid='+groupId+'&projectid='+projectId;
    }

    /**
     * @author huajiancheng
     * @date 2020/04/15
     * @description 发送新增方案的信息
     */
    let g_id = "";
    let p_id = "";
    function sendProjectInfo(data) {
        //新增方案
        $.ajax({
            url: ctxPath + "project/commitproject",
            type: "post",
            contentType: 'application/json;charset=utf-8',
            data: JSON.stringify(data),
            success: function (res) {
                console.log(res)
                let code = res.code;
                let msg = res.msg;
                if (code == 200) {
                    g_id = res.data.group_id;
                    p_id = res.data.project_id;
                    checkEmail()
                } else {
                    showInfo(msg);
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                if (xhr.status == 403) {
                    window.location.href = ctxPath + "login";
                } else {
                    console.log(thrownError);
                }
            }
        });
    }
    
    function sendGroupByadd() {
        $.ajax({
            type: "POST",
            url: ctxPath + "project/groupandproject",
            dataType: 'json',
            data: {},
            success: function (res) {
                let code = res.code;
                if (code == 200) {
                    let data = res.data;
                    let groupStr = '';
                    for (let i = 0; i < data.length; i++) {
                        let dataJson = data[i];
                        let group_id = dataJson.group_id;
                        let group_name = dataJson.group_name;
                        if (group_id == groupId) {
                            groupStr += '<option selected value="' + group_id + '">' + group_name + '</option>'
                        } else {
                            groupStr += '<option value="' + group_id + '">' + group_name + '</option>'
                        }
                    }
                    $("#groupList").html(groupStr); // 修改方案 普通方案 方案组下拉框
                    $("#groupList2").html(groupStr); // 修改方案 高级方案 方案组下拉框
                } else {
                    showInfo("出错啦，请稍后再试");
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                if (xhr.status == 403) {
                    window.location.href = ctxPath + "login";
                } else {
                    console.log(thrownError);
                }
            }
        });
    }

    /**
     * @author liyoulin
     * @date 2020/04/15
     * @description 切换快速创建和高级方案
     */
    $("#search-tab li").on("click", function () {
        var tip = $(this).attr("data-type")
        switch (tip) {
            case "2":
                $(this).siblings().removeClass("create-tab-act");
                $(this).addClass("create-tab-act");
                $("#tips").html("当前是快速创建，可设置100字");
                $("#tab2").hide();
                $("#tab1").show();
                break;
            case "1":
                $(this).siblings().removeClass("create-tab-act");
                $(this).addClass("create-tab-act");
                $("#tips").html("当前是高级创建，可设置550字");
                $("#tab1").hide();
                $("#tab2").show();
                break;
            case "3":
                break;
            default:
                break;
        }
    });

    /**
     * @author huajiancheng
     * @date 2020/04/15
     * @description 高级创建
     * @param message 提示的信息
     */
    function gosubmit1(param) {
        var proname = $("#proname1").val().trim();  // 方案名称
        var prokeywords = $("#prokeywords1").val().trim();  // 关键词
        var proshield = $("#proshield1").val().trim(); // 屏蔽词
        if (proname == '') {
            $("#proname1").addClass("text-error");
            showtips("请填写方案名称！");
            return;
        } else {
            $("#proname1").removeClass("text-error");
        }
        if(proname.length>6){
        	showtips("方案名称长度最多六个字符");
        	return;
        }
        if (prokeywords == '') {
            $("#prokeywords1").addClass("text-error");
            showtips("请填写方案主体关键词！")
            return;
        } else {
            $("#prokeywords1").removeClass("text-error");
        }
        if (prokeywords == proshield) {
        	showtips("关键词与屏蔽词不能相同");
            return;
        }

        var flag = new RegExp("[`~!@#$^&*=\\-{}':;,'\\[\\].<>《》/?~！@#￥……&*（）——{}【】‘；：”“'。，、？ ]")
        let characterList = "`~!@#$^&*=\-{}':;,'\[\].<>《》/?~！@#￥……&*（）——{}【】‘；：”“'。，、？ ".split("")
        let tiptext = "其他特殊符号"

        if (flag.test(prokeywords)) {
            $("#prokeywords1").addClass("text-error");
            for (let i = 0; i < characterList.length; i++) {
                if(prokeywords.indexOf(characterList[i])>-1){
                    tiptext = characterList[i]
                    if(characterList[i]==" "){
                        tiptext = "空格"
                    }
                    break;
                }
            }
            showtips("关键词内容只能使用+|()这三种符号，不能使用"+tiptext);
            return;
        }

        if (flag.test(proshield)) {
            $("#proshield1").addClass("text-error");
            for (let i = 0; i < characterList.length; i++) {
                if(proshield.indexOf(characterList[i])>-1){
                    tiptext = characterList[i]
                    if(characterList[i]==" "){
                        tiptext = "空格"
                    }
                    break;
                }
            }
            showtips("屏蔽词内容只能使用+|()这三种符号，不能使用"+tiptext);
            return;
        }


        $("#createcomplete").addClass("line-active");

        prokeywords = prokeywords.toString().replace(/(\s|;|-|"|‘|；|、|‘’|'|’|“”|》|《|<|>|\.|。)/g, ",");
        prokeywords = prokeywords.toString().replace(/,{1,}/, ",");
        if (prokeywords.indexOf("，") != -1) {
            prokeywords = prokeywords.toString().replace(new RegExp("，", 'gm'), ",");
        }
        proshield = proshield.toString().replace(/(\s|;|-|"|‘|；|、|‘’|'|’|“”|》|《|<|>|\.|。)/g, ",");
        proshield = proshield.toString().replace(/,{1,}/, ",");
        if (proshield.indexOf("，") != -1) {
            proshield = proshield.toString().replace(new RegExp("，", 'gm'), ",");
        }



        let prokeywordsArray = prokeywords.split(",");
        if (prokeywordsArray.length >= 100) {
            showInfo("关键词不能超过100个！");
        }


        let proshieldArray = proshield.split(",");
        if (proshieldArray.length >= 100) {
            showInfo("屏蔽词词不能超过100个！");
        }

        if (proname != '' && prokeywords != '' && proshieldArray.length < 100 && prokeywordsArray.length < 100) {
            let group_id = $("#groupList option:selected").val().trim();
            let dataJson = new Object();
            dataJson.project_name = proname;
            dataJson.subject_word = prokeywords;
            dataJson.stop_word = proshield;
            dataJson.group_id = group_id;
            dataJson.project_type = 1;
            sendProjectInfo(dataJson);
        }
    };


    $("#goback1").click(function (param) {
        $("#proname1").removeClass("text-error");
        $("#prokeywords1").removeClass("text-error");
        $("#proshield1").removeClass("text-error");
        $("#createcomplete").removeClass("line-active");
        window.location.href = ctxPath + "project";
    });


    $(document).on('click', '#goback', function (param) {
        $("#proname1").removeClass("text-error");
        $("#prokeywords1").removeClass("text-error");
        $("#proshield1").removeClass("text-error");
        $("#createcomplete").removeClass("line-active");
        window.location.href = ctxPath + "project";
    });


    // 快速创建
    function gosubmit() {
        var proname = $("#proname").val();
        var prokeywords = $("#prokeywords").val();
       // var properson = $("#properson").val();
        var properson = '';
        //var proarea = $("#proarea").val();
        var proarea = '';
        //var proaccident = $("#proaccident").val();
        var proaccident = '';
        var proshield = $("#proshield").val();
        if (proname == '') {
            $("#proname").addClass("text-error");
            showtips("请填写方案名称！")
            return;
        } else {
            $("#proname").removeClass("text-error");
        }
        if (prokeywords == '') {
            $("#prokeywords").addClass("text-error");
            showtips("请填写方案主体关键词！");
            return;
        } else {
            $("#prokeywords").removeClass("text-error");
        }
        
        
        if (prokeywords == proshield) {
        	showtips("关键词与屏蔽词不能相同");
            return;
        }

        var flag = new RegExp("[`~!@#$^&*()=+\\-|{}':;'\\[\\].<>《》/?~！@#￥……&*（）——{}【】‘；：”“'。、？ ]")
        let characterList = "`~!@#$^&*()=+\-|{}':;'\[\].<>《》/?~！@#￥……&*（）——{}【】‘；：”“'。、？ ".split("")
        let tiptext = "其他特殊符号"

        if (flag.test(prokeywords)) {
            $("#prokeywords1").addClass("text-error");
            for (let i = 0; i < characterList.length; i++) {
                if(prokeywords.indexOf(characterList[i])>-1){
                    tiptext = characterList[i]
                    if(characterList[i]==" "){
                        tiptext = "空格"
                    }
                    break;
                }
            }
            showtips("关键词内容只能使用逗号，不能使用"+tiptext);
            return;
        }

        if (flag.test(proshield)) {
            $("#proshield1").addClass("text-error");
            for (let i = 0; i < characterList.length; i++) {
                if(proshield.indexOf(characterList[i])>-1){
                    tiptext = characterList[i]
                    if(characterList[i]==" "){
                        tiptext = "空格"
                    }
                    break;
                }
            }
            showtips("屏蔽词内容只能使用逗号，不能使用"+tiptext);
            return;
        }



        prokeywords = prokeywords.toString().replace(/(\s|;|-|"|‘|；|、|‘’|'|’|“”|》|《|<|>|\.|。)/g, "|");
        prokeywords = prokeywords.toString().replace(/,{1,}/, ",");
        if (prokeywords.indexOf("，") != -1) {
            prokeywords = prokeywords.toString().replace(new RegExp("，", 'gm'), ",");
        }

        if (properson.indexOf("，") != -1) {
            properson = properson.toString().replace(new RegExp("，", 'gm'), ",");
        }

        if (proarea.indexOf("，") != -1) {
            proarea = proarea.toString().replace(new RegExp("，", 'gm'), ",");
        }

        if (proaccident.indexOf("，") != -1) {
            proaccident = proaccident.toString().replace(new RegExp("，", 'gm'), ",");
        }

        proshield = proshield.toString().replace(/(\s|;|-|"|‘|；|、|‘’|'|’|“”|》|《|<|>|\.|。)/g, ",");
        proshield = proshield.toString().replace(/,{1,}/, ",");
        if (proshield.indexOf("，") != -1) {
            proshield = proshield.toString().replace(new RegExp("，", 'gm'), ",");
        }


        let prokeywordsArray = prokeywords.split(",");
        if (prokeywordsArray.length >= 100) {
            showInfo("关键词不能超过100个！");
        }


        let propersonArray = properson.split(",");
        if (propersonArray.length >= 100) {
            showInfo("人物词不能超过100个！");
        }


        let proareaArray = proarea.split(",");
        if (proareaArray.length >= 100) {
            showInfo("地域词不能超过100个！");
        }

        let proaccidentArray = proaccident.split(",");
        if (proaccidentArray.length >= 100) {
            showInfo("事件词不能超过100个！");
        }


        let proshieldArray = proshield.split(",");
        if (proshieldArray.length >= 100) {
            showInfo("屏蔽词不能超过100个！");
        }

        if (proname != '' && prokeywords != '' && prokeywordsArray.length <100
            && propersonArray.length <100 && proareaArray.length <100
            && proaccidentArray.length <100 && proshieldArray.length <100) {
            let group_id = $("#groupList2 option:selected").val();
            let dataJson = new Object();
            dataJson.project_name = proname;
            dataJson.subject_word = prokeywords;
            dataJson.stop_word = proshield;
            dataJson.group_id = group_id;
            dataJson.project_type = 2;
            dataJson.event_word = proaccident; // 事件关键词
            dataJson.regional_word = proarea; // 地域词
            dataJson.character_word = properson;  // 人物关键词
            sendProjectInfo(dataJson);
        }
    };
    
    $('.navLi').click(function(){
    	jumpNavLocation($(this).data('type'), groupId, null);
    })


function savefunctin() {
    var tabindex = 1
    $('#search-tab > li').each(function () {
        if ($(this).hasClass('create-tab-act')) {
            tabindex = $(this).attr('data-type')
        }
    });
    if(tabindex==1){
        gosubmit1()
    }else if(tabindex==2){
        gosubmit()
    }
}



//保存
function save() {
    var data = getData();
    var warning_status = 0;
    if ($('#status').is(':checked')) {
        warning_status = 1;
    }

    if(warning_status == 1){
        if (data.warning_name == "") {
            showtips("预警名称为空，请关闭预警开关！");
            return;
        }
        if (data.warning_word == "") {
            showtips("预警词为空，请关闭预警开关！");
            return;
        }
        if(data.warning_classify == ""){
            showtips("数据来源为空，请关闭预警开关！");
            return;
        }
    }
    let warning_word = data.warning_word

    if (warning_status == 0 && data.warning_name != "" && warning_word != "" && data.warning_classify != "") {  // 未开 有词
        swal({
            title: "预警创建完成",
            text: "是否开启预警设置",
            type: "success",
            showCancelButton: true,
            confirmButtonColor: "#36bea6",
            confirmButtonText: "开启预警",
            cancelButtonColor: "#6c757d",
            cancelButtonText: "直接创建",
            closeOnConfirm: false,
            closeOnCancel: false
        }).then(function (that) {
            if (that.value) {
                $("#checkmonitor").addClass("line-active");  // 是
                warning_status = 1;
                $("#status").bootstrapSwitch('state', true, true);
                $(".alertSettings").css({"display":"block"})
            } else {
                $("#checkmonitor").addClass("line-active");  // 否
                warning_status = 0;
            }
            updateData(warning_status,data);
        });
    } else if (warning_status == 0 && warning_word == "") {  // 未开   无词
        updateData(warning_status,data);
    } else { // 开了 有词
        updateData(warning_status,data);
    }
}


// 修改数据
function updateData(warning_status, data) {
//        var data = getData()
    data.warning_status = warning_status;
    var warning_source = JSON.parse(data.warning_source)
    if (warning_status==1 && warning_source.type == 2) {
        if ($('#warning-source > input').val() == '') {
            showtips("由于您没有填写收件人邮箱,将使用发件人邮箱作为收件人")
            // return
        }
    }

    $.ajax({
        url: ctxPath + 'system/updateWarning',
        type: 'post',
        dataType: 'json',
        data: data,
        success: function (res) {
            if (res.status == 200) {
                $("#createcomplete").addClass("line-active");
                showInfoResult("方案新增完成", "稍后可以到数据监测中查看该方案的数据监测", g_id, p_id);
            } else {
                showInfo("修改预警失败!");
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            if (xhr.status == 403) {
                window.location.href = ctxPath + "login";
            }
        }
    });
}


//返回
function backPage() {
    window.location.href = ctxPath + "project";
}

function badgeClick(that) {
    if ($(that).hasClass('badge-info')) {
//       		$(that).removeClass('badge-info')
//       		$(that).addClass('badge-light')
//       		$(that).siblings().removeClass('badge-light')
//       		$(that).siblings().addClass('badge-info')
    } else {
        $(that).removeClass('badge-light')
        $(that).addClass('badge-info')
        $(that).siblings().removeClass('badge-info')
        $(that).siblings().addClass('badge-light')
    }
}

//来源点击事件
function badgeClassifyClick(that) {
    if ($(that).text() == '全部') {
        if ($(that).hasClass('badge-info')) {
            $(that).removeClass('badge-info')
            $(that).addClass('badge-light')
            $(that).siblings().removeClass('badge-info')
            $(that).siblings().addClass('badge-light')
        } else {
            $(that).removeClass('badge-light')
            $(that).addClass('badge-info')
            $(that).siblings().removeClass('badge-light')
            $(that).siblings().addClass('badge-info')
        }
        return
    }
    if ($(that).hasClass('badge-info')) {
        $(that).removeClass('badge-info')
        $(that).addClass('badge-light')
    } else {
        $(that).removeClass('badge-light')
        $(that).addClass('badge-info')
    }
}

function getData() {
    var warning_name_str = $('#warning-name').val() //预警名称
    var warning_word_str = $('#warning-word').val()//设置预警词
    var warning_classify_str = ''//来源类型
    $('#warning-classify > .badge').each(function () {
        if ($(this).hasClass('badge-info')) {
            var data_id = $(this).attr('data-id');
            if (data_id != 0) {
                warning_classify_str += $(this).attr('data-id') + ','
            }
        }
    });
    warning_classify_str = warning_classify_str.substring(0, warning_classify_str.length - 1)

    var warning_content_str = ''//预警内容
    $('#warning-content > .badge').each(function () {
        if ($(this).hasClass('badge-info')) {
            warning_content_str = $(this).attr('data-id')
        }
    });

    var warning_similar_str = ''//相似文章合并
    $('#warning-similar > .badge').each(function () {
        if ($(this).hasClass('badge-info')) {
            warning_similar_str = $(this).attr('data-id')
        }
    });
    var warning_match_str = ''//匹配方式
    $('#warning-match > .badge').each(function () {
        if ($(this).hasClass('badge-info')) {
            warning_match_str = $(this).attr('data-id')
        }
    });
    var warning_deduplication_str = ''//预警去重
    $('#warning-deduplication > .badge').each(function () {
        if ($(this).hasClass('badge-info')) {
            warning_deduplication_str = $(this).attr('data-id')
        }
    });
    var warning_source_str = new Object();//预警来源
    $('#warning-source > .badge').each(function () {
        if ($(this).hasClass('badge-info')) {
            warning_source_str.type = $(this).attr('data-id')
        }
    });
    warning_source_str.email = ''
    if ($('#warning-source > input').val() != null) {
        warning_source_str.email = $('#warning-source > input').val()
    }

    var warning_receive_time_str = new Object();//接收时间
    warning_receive_time_str.start = $('#warning-receive-time-start').val()
    warning_receive_time_str.end = $('#warning-receive-time-end').val()

    var weekend_warning_str = ''//周末预警
    $('#weekend-warning > .badge').each(function () {
        if ($(this).hasClass('badge-info')) {
            weekend_warning_str = $(this).attr('data-id')
        }
    });
    var warning_interval_str = new Object();//预警间隔
    $('#warning-interval > .badge').each(function () {
        if ($(this).hasClass('badge-info')) {
            warning_interval_str.type = $(this).attr('data-id')
        }
    });
    warning_interval_str.time = ''
    if ($('#warning-interval-time').val() != null) {
        warning_interval_str.time = $('#warning-interval-time').val()
    }

    var data = new Object();
    data.project_id = p_id
    data.warning_word = warning_word_str
    data.warning_name = warning_name_str
    data.warning_classify = warning_classify_str
    data.warning_name = warning_name_str
    data.warning_content = warning_content_str
    data.warning_similar = warning_similar_str
    data.warning_match = warning_match_str
    data.warning_deduplication = warning_deduplication_str.toString()
    data.warning_source = JSON.stringify(warning_source_str)
    data.warning_receive_time = JSON.stringify(warning_receive_time_str)
    data.weekend_warning = weekend_warning_str
    data.warning_interval = JSON.stringify(warning_interval_str)
    return data
}

$('body').on('click', '#warning-source span', function () {
    var id = $(this).data('id');
    if (id == 2) {
        $('#email-input').show();
    } else {
        $('#email-input').hide();
    }
})

$(".bt-switch-early-warning input[type='checkbox']").bootstrapSwitch({
    onText: "ON",
    offText: "OFF",
    onColor: "success",
    offColor: "warning",
    size: "normal",
    handleWidth: "10",
    onSwitchChange: function (event, state) {
        window.parent.Warn_Start = state;
        var $el = $(event.el)
            , value = event.value;
        var step = this.value;
        if (state == true) {
//                 alert(1)
            $(".alertSettings").css({"display":"block"})
        } else {
//             	alert(2)
            $(".alertSettings").css({"display":"none"})
        }
    }

})
function createBindingEmailDialog() {

    const create =
        '<div class="shadebox" id="createmodel">' +
        '    <div class="modal-dialog" role="document">' +
        '        <div class="modal-content">' +
        '            <div class="modal-header align-flexend" style="border:none">' +
        '                <h5 class="modal-title"><i class="ti-marker-alt m-r-10"></i>绑定发件邮箱</h5>' +
        '                <i class="mdi mdi-close-circle-outline font-18 cursor-po" id="closethis"></i>' +
        '            </div>' +
        '            <div class="modal-body">' +
        '                <div class="input-group mb-3" style="align-items: center">' +
        '                    <div style="min-width: 120px">发件人邮箱:</div>' +
        '                    <input type="text" class="form-control" id="username" placeholder="请输入发件人邮箱，例如:warring@stonedt.com" maxlength="100">' +
        '                </div>' +
        '                <div class="input-group mb-3" style="align-items: center">' +
        '                    <div style="min-width: 120px">SMTP服务器地址:</div>' +
        '                    <input type="text" class="form-control" id="host" placeholder="请输入SMTP服务器地址,例如:smtp.exmail.qq.com" maxlength="100">' +
        '                </div>' +
        '                <div class="input-group mb-3" style="align-items: center">' +
        '                    <div style="min-width: 120px">发件人授权码:</div>' +
        '                    <input type="text" class="form-control" id="password" placeholder="请输入发件人授权码,例如:3fakOUExbvsr3JVo" maxlength="100">' +
        '                </div>' +
        '                <div class="input-group mb-3" style="align-items: center">' +
        '                    <div style="min-width: 120px">SMTP服务器端口:</div>' +
        '                    <input type="text" class="form-control" id="port" placeholder="请输入SMTP服务器端口，例如:465" maxlength="100">' +
        '                </div>' +
        '            </div>' +
        '            <div class="modal-footer" style="border:none">' +
        '                <button type="button" class="btn btn-info" id="confirm"> 确定</button>' +
        '                <button type="button" class="btn btn-secondary" id="cancel">取消</button>' +
        '             </div>' +
        '        </div>' +
        '    </div>' +
        '</div>'

    $("body").append(create)
    $("#closethis").click(function (param) {
        $("#createmodel").remove()
    })
    $("#cancel").click(function (param) {
        $("#createmodel").remove()
    })
    $("#confirm").click(function () {
        // 获取所有变量
        let host = $("#host").val();
        let username = $("#username").val();
        let password = $("#password").val();
        let port = $("#port").val();
        if (host == '' || host == null) {
            showtips("SMTP服务器地址不能为空！")
        }
        if (username == '' || username == null) {
            showtips("发件人邮箱不能为空！")
        }
        if (password == '' || password == null) {
            showtips("发件人授权码不能为空！")
        }
        if (port == '' || port == null) {
            showtips("SMTP服务器端口不能为空！")
        }
        let requestBody = new Object();
        requestBody.host = host;
        requestBody.username = username;
        requestBody.password = password;
        requestBody.port = port;
        showtips("正在绑定发件邮箱...,会有一定延迟，请耐心等待")
        $.ajax({
            url: window.location.origin + '/mail/saveMailConfig',
            type: 'post',
            contentType:"application/json; charset=utf-8",
            dataType: 'json',
            data: JSON.stringify(requestBody),
            success: function (res) {
                if (res.status == 200) {
                    showtips("绑定成功！")
                    $("#createmodel").remove()
                    save()
                } else {
                    showtips(res.msg)
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                if (xhr.status === 403) {
                    window.location.href = ctxPath + "login";
                }
            }
        });
    })
}

function checkEmail(){
    var warning_status = 0;
    if ($('#status').is(':checked')) {
        warning_status = 1;
    }
    if(warning_status==0){
        save()
        return;
    }
    let warning_source_str;
    $('#warning-source > .badge').each(function () {
        if ($(this).hasClass('badge-info')) {
            warning_source_str = $(this).attr('data-id')
        }
    });
    if (warning_source_str=='1'){
        save();
        return;
    }
    if (warning_source_str=='3'){
        $.ajax({
            url: '/wechat/checkBind',
            type: 'get',
            success: function (res) {
                if (res.status === 200) {
                    save()
                } else {
                    QRCodePopup()
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                if (xhr.status === 403) {
                    window.location.href = ctxPath + "login";
                }
            }
        });
        return;
    }

    $.ajax({
        url: window.location.origin + '/mail/checkMailConfig',
        type: 'post',
        dataType: 'json',
        data: {},
        success: function (res) {
            if (res.status === 200) {
                save()
            } else {
                showtips("请先绑定发件邮箱！")
                createBindingEmailDialog()
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            if (xhr.status === 403) {
                window.location.href = ctxPath + "login";
            }
        }
    });
}
</script>
</body>

</html>